<template>
  <div>
    <nav-bar title="通讯录"></nav-bar>
    <div class="personalList maxinBox">
      <van-checkbox-group v-model="choosePersonal">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in list"
            clickable
            :key="index"
            :title="item"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox :name="item" ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <div class="submit">
         <van-button size="small" type="info" @click="save">确定</van-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: ['张三', '李四', '王五'],
        choosePersonal: [],
      }
    },
    methods: {
      // 多选选择
      toggle(index) {
        this.$refs.checkboxes[index].toggle();
      },
      // 保存选择
      save() {
        this.$router.push({
          name: 'RealTimeInspection',
          params: {
            personList: this.choosePersonal
          }
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .submit{
    margin-top: 2 * $spacing;
    text-align: $center;
  }
</style>
